<template>
    <div class="headMainDiv">
        <div class="headDiv">
            <div class="buttonWrapDiv">
                <div>
                    <Button class="button" @click="toHomePage()" style="">
                        <img src="~@/assets/icon/home.png" width="30px" height="30px">
                    </Button>
                </div>
                <div class="menuWord">
                    <span>首页</span>
                </div>
            </div>

            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <div class="buttonWrapDiv">
                <div>
                    <Button class="button" @click="toFileManager()">
                        <img src="~@/assets/icon/file_manager.png" width="30px" height="30px">
                    </Button>
                </div>
                <div class="menuWord">
                    <span>文件管理</span>
                </div>
            </div>

            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <div class="buttonWrapDiv">
                <div>
                    <Button class="button" @click="toSearchFileFromFolder()">
                        <img src="~@/assets/icon/computer1.png" width="30px" height="30px">
                    </Button>
                </div>
                <div class="menuWord">
                    <span>电脑搜索</span>
                </div>
            </div>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <div class="buttonWrapDiv">
                <div>
                    <Button class="button" @click="toToolBox()">
                        <img src="~@/assets/icon/tool.png" width="30px" height="30px">
                    </Button>
                </div>
                <div class="menuWord">
                    <span>工具箱</span>
                </div>
            </div>
        </div>
        <div class="buttonDiv">
            <Button size="small" @click="min()" ghost style="border: 0px">—</Button>
            <Button size="small" @click="close()" ghost style="border: 0px">
                <img src="~@/assets/icon/close.png" width="10px" height="10px">
            </Button>
        </div>
    </div>
</template>
<script>
  const {ipcRenderer: ipc} = require('electron')
  export default {
    name: 'HeadPage',
    components: {},
    data () {
      return {
        searchData: ''
      }
    },
    created () {
      console.info('初始化')
    },
    methods: {
      toHomePage: function () {
        console.info('home page')
        this.$router.push({path: '/'}).catch(err => {
          if (err.toString().indexOf('NavigationDuplicated') !== 0) {
            console.info('跳转页面异常', err)
          }
        })
      },
      toFileManager: function () {
        this.$router.push({path: '/file-manager'}).catch(err => {
          if (err.toString().indexOf('NavigationDuplicated') !== 0) {
            console.info('跳转页面异常', err)
          }
        })
      },
      toSearchFileFromFolder: function () {
        this.$router.push({path: '/file-search-in-folder'}).catch(err => {
          if (err.toString().indexOf('NavigationDuplicated') !== 0) {
            console.info('跳转页面异常', err)
          }
        })
      },
      toToolBox: function () {
        this.$router.push({path: '/tool-box'}).catch(err => {
          if (err.toString().indexOf('NavigationDuplicated') !== 0) {
            console.info('跳转页面异常', err)
          }
        })
      },
      close: function () {
        console.info('close')
        ipc.send('close')
      },
      min: function () {
        console.info('min')
        ipc.send('min')
      }
    }
  }
</script>

<style scoped>
    .headMainDiv {
        flex: 1 auto;
        /*flex-direction: row-reverse;*/
        display: flex;
        background-color: #CDBE70;
        box-shadow:2px 2px 10px #909090;
    }
    .headDiv {
        /*border: 1px solid green;*/
        /*width: 86%;*/
        height: 90px;
        margin-top: 20px;
        padding-left: 20px;
        -webkit-app-region: drag;
        /*float: left;*/
        /*display: flex;*/
        flex-grow:1;
        display: flex;
    }
    .buttonDiv {
        width: 70px;
        height: 40px;
        /*float: right;*/
        text-align: right;
        margin-top: 10px;
        padding-right: 10px;
    }
    .button {
        -webkit-app-region: no-drag;
        width: 50px;
        height: 50px;
        padding: 10px;
        border-radius: 50%;
        box-shadow:10px 2px 10px #909090;
    }
    .menuWord {
        text-align: center;
        color: #FFF;
        text-shadow: 10px 2px 10px #333;
    }
    .buttonWrapDiv {
        margin-left: 30px;
    }
</style>
